<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			 .box{
				 width: 800px;
				 height: 600px;
				 border: 1px solid yellow;
				 margin: auto;
				 text-align: center;
                 background-color: pink;
			 }
			 .box>div{
				 width: 300px;
				 height: 300px;
				 background-color: #87CEEB;
				 border-radius: 50%;
				 margin: auto;
				 line-height: 300px;
				 color: white;
				 font-size: 30px;
				 font-weight: bold;
				 margin-top: 50px;
			 }
			 .box >a{
				 text-decoration: none;
				 font-size: 20px;
				 display: inline-block;
				 background-image:linear-gradient(to right,skyblue,yellow) ;
				 width: 200px;
				 height: 50px;
				 border-radius: 20px;
				 line-height: 50px;
				 color: white;
				 margin: 30px;
				 
			 }
			 .bg-red{
				 background-color: #FF0000;
			 }
			 .bg-green{
				 background-color: greenyellow;
			 }
			 
		</style>
	</head>
	<body>
		<div class="box">
			<div class="content" id="content">抽到什么吃什么</div>
			<a href="#" onclick="run();" id="start">戳一戳</a>
		</div>
		
		
	<script>
		
		
		const goods=["麻辣烫","鱼粉","麻辣拌","干锅煎肉饭","波波鱼","螺蛳粉","砂锅","香锅","意面","盖浇饭","椒麻鸡","武汉热干面","面皮","肉夹馍","鸡汤米线","卷饼","瘦肉丸","花甲粉丝","炸鸡汉堡","黄焖鸡","冒菜","食堂","饺子","饼","炒米粉","寿司","老公"];
		let flag=true;
		let content=document.getElementById("content");
		let start=document.querySelector("#start");
		let timer;
		
		function run(){
			if(flag){
				flag=false;
				start.textContent="STOP!";
				// content.style.backgroundColor="red";
				
				content.className="bg-red";
				timer=window.setInterval(function (){
			
			let index=Math.floor(Math.random()*goods.length);
			let g=goods[index];
			content.textContent=g;
			},10);
			
			}else{
				flag=true;
				start.innerText="开始抽奖";
				content.className="bg-green";
				window.clearInterval(timer);
			}
			
		}
	
	
	
	</script>
	</body>
</html>
